<template>
	<view v-if="value.link && value.link[0] && value.link[0].url" class="link" style="display: flex;justify-content: space-between;align-items: flex-end;">
		<el-tooltip disabled class="item" effect="dark" content="链 接" placement="top-start">
			<view :class="isPc?'linkStyle linkPc':'linkStyle linkOs'" @click="dialogVisible = true">
				<uv-icon color="#353535" :size="size" :name="icon"></uv-icon>
			</view>
		</el-tooltip>
		<el-dialog title="链接" :visible.sync="dialogVisible" width="751rpx">
			<view v-for="(ite,inde) in value.link" :key="inde">
				<el-link type="primary" :href="ite.url" target="_blank">
					<view style="display: flex;">
						<uv-icon color="#409EFF" :name="icon"></uv-icon>{{ite.title}}
					</view>
				</el-link>
			</view>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	// 引入
	import tabbars from '@/components/tabbar/tabbar.vue';
	import {
		index,
		task,
		api,
		apiId,
		getScroll,
		scroll,
		delScroll,
	} from '@/common/api.js';
	import config from '@/common/config'
	export default {
		components: {
			// 注册组件
			tabbars
		},
		model: {
			prop: 'value', // 对应 props 的属性名
			event: 'input' // 触发事件名
		},
		props: {
			value: [Object, Array, String],
			linkStyle: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: '分享'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			icon: {
				type: String,
				default: 'attach'
			},
			size: {
				type: String,
				default: '28'
			},
		},
		data() {
			return {
				dialogVisible: false
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		methods: {
			isNullOrOnlyNumbersSymbols(input) {
				// 判断是否为null、undefined或空字符串（包括只有空格的情况）
				if (input === null || input === undefined || input.trim() === '') {
					return true;
				}
				// 判断是否只包含数字和常见符号
				// 这里的符号可以根据需要调整，示例包含：, . ! ? @ # $ % ^ & * ( ) - _ + = [ ] { } ; : ' " \ | / ~ `
				return /^[0-9~！@#￥%……&*（））,.!?@#$%^&*()\-_+=\[\]{};:'"\\|\/~`\s]+$/.test(input);
			},
			dialogue() {
				if (!this.disabled) this.$uv.debounce(this.taskd(), 500);
			},
			toast() {
				if (this.targetLanguage == '标签' || this.targetLanguage == '描述' || this
					.targetLanguage == '标题') {
					return '生成' + this.targetLanguage;
				}
				if (this.targetLanguage == '全部') {
					return this.targetLanguage + '生成';
				}
				return '';
			},
			async taskd() {
				var that = this;
				if (this.target == '翻译' && this.isNullOrOnlyNumbersSymbols(this.value)) {
					return this.$refs.toast.show({
						type: 'error',
						duration: '2000',
						message: "翻译内容为空或纯数字！"
					});
				}
				this.$refs.toast.show({
					message: "发送中。。。",
					duration: '2000'
				});
				var con = {
					// sourceText: "头部特征： 大眼睛：圆滚滚的大眼睛，带有长睫毛。 微笑：微微上扬的嘴角，传达友好和快乐。 腮红：脸颊上淡淡的腮红，增加可爱感。 身体特征： 圆润：身体线条流畅且圆润，避免尖锐的边缘。 短小：身体比例短小，减少蛇的威胁感。 鳞片：身上有可爱的鳞片图案，但不要过于复杂。 颜色选择： 温暖色调：如橙色、黄色或粉色，传达温暖和活力。 渐变：使用色彩渐变，增加视觉的丰富性。 装饰元素： 花朵：头上或身上装饰有小花。 彩带：身上缠绕着彩带，增加节日气氛。 铃铛：尾巴末端挂一个小铃铛，增加趣味性。 动作姿势： 挥手：前爪做出挥手的动作，表示欢迎。 盘坐：身体盘坐，尾巴环绕身体，显得悠闲自在。 人性化特征： 表情：眨眼或吐舌头，增加互动感。 服装：可以穿戴一些节日服装，如小帽子或围巾。 背景元素： 节日：背景中可以有一些节日元素，如灯笼、鞭炮。 自然：也可以放置一些自然元素，如树叶、花朵，以表现蛇与自然的和谐。 命名提示： 可以使用“小灵蛇”、“福蛇宝”、“悠蛇”等名字，既符合蛇的形象，又易于记忆。",
					target: this.target,
					sourceText: this.value,
					targetLanguage: this.targetLanguage ? this.targetLanguage : "英文",
					imageUrl: this.$replacd(this.imageUrl),
					articles: this.articles,
					id: this.id
				};
				api(this.aiApi + '/target', con, {
					custom: {
						auth: true,
						toast: true,
						catch: true,
					},
				}).then(e => {
					if (e.choices) {
						that.$refs.toast.show({
							message: this.target + '，' + this.toast() + '成功！',
							duration: '2000'
						})
						this.updateValue(e.choices[0].message.content, this.targetLanguage, this.target);
					}
				}).catch(e => {
					that.$refs.toast.show({
						type: 'error',
						message: e.msg || this.target + this.toast() + '失败！',
						duration: '2000'
					});
				})
			},
			replacd(e) {
				if (!e[0] || !e) return [];
				return e.map(function(item) {
					return item.replaceAll('http://localhost:8080', 'https://www.readend.com').replaceAll(
						'https://localhost:8080', 'https://www.readend.com');
					// console.log(item);
				})
				// let str = JSON.stringify(e);
				// console.log(str);
				// str = str.replaceAll('http://localhost:8080', 'https://www.readend.com').replaceAll(
				// 	'https://localhost:8080', 'https://www.readend.com');
				// console.log(str);
				// return str = JSON.parse(e, true);
			},
			updateValue(newVal, details, type) {
				this.$emit('input', newVal, details, type); // 触发事件更新父组件变量
				this.$emit('res', newVal, details, type); // 触发事件更新父组件变量
			},
			routed(url) {
				uni.$uv.route({
					url: url,
					intercept(params, next) {
						console.log(params, next)
						uni.showLoading({
							title: '等待中...'
						})
						// 模拟处理等待
						setTimeout(() => {
							uni.hideLoading();
							next(true);
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.link {
		// width: calc(100% - 20px);
		// padding: 10px;
		cursor: pointer;

		.linkStyle {
			cursor: pointer;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
		}

		.linkPc {
			width: 35px !important;
			height: 35px !important;
		}

		.linkOS {
			padding: 2px !important;
			width: 26px !important;
			height: 26px !important;
		}
	}

	.noClick {
		// pointer-events: none;
		cursor: not-allowed;
	}
</style>